<template>
  <a-select
    allowClear
    :disabled="disabled"
    :style="{ width: width > 0 ? `${width}px` : '100%' }"
    :placeholder="placeholder"
    :mode="mode"
    v-model="val"
  >
    <a-select-option value="">不限</a-select-option>
    <a-select-option v-for="o in options" :key="o.value" :value="o.value">
      {{ o.label }}
    </a-select-option>
  </a-select>
</template>

<script>
export default {
  model: {
    prop: 'modelVal',
    event: 'change'
  },
  props: {
    modelVal: {
      type: [String, Array],
      default: ''
    },
    width: {
      type: Number,
      default: 0
    },
    options: {
      type: Array,
      default: () => {
        return [
          { value: '1', label: '男' },
          { value: '2', label: '女' }
        ]
      }
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'default' // default | multiple
    }
  },
  data() {
    return {
      val: ''
    }
  },
  mounted() {
    this.val = this.modelVal
  },
  watch: {
    modelVal(v) {
      this.val = v
    },
    val(v) {
      this.$emit('change', v)
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped></style>
